<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>公共交通异常检测系统 - 系统管理</title>
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<link rel="stylesheet" href="./css/system-management.css">
		<link rel="icon" href="./img/logo_nobackground.png" type="image/png">
	</head>
	<body>
		<div id="app">
			<!-- 页面头部 -->
			<header class="page-header">
				<div class="header-left">
					<h1>系统管理</h1>
					<el-breadcrumb separator="/">
						<el-breadcrumb-item>首页</el-breadcrumb-item>
						<el-breadcrumb-item>系统管理</el-breadcrumb-item>
					</el-breadcrumb>
				</div>
				<div class="header-right">
					<el-button-group>
						<el-button type="primary" @click="saveSettings">
							<i class="el-icon-check"></i> 保存设置
						</el-button>
						<el-button type="success" @click="backupSystem">
							<i class="el-icon-upload2"></i> 系统备份
						</el-button>
					</el-button-group>
				</div>
			</header>

			<!-- 主要内容区 -->
			<div class="main-content">
				<!-- 功能导航 -->
				<div class="function-nav">
					<el-tabs v-model="activeTab" @tab-click="handleTabClick">
						<el-tab-pane label="用户管理" name="users">
							<template slot="label">
								<i class="el-icon-user"></i> 用户管理
							</template>
						</el-tab-pane>
						<el-tab-pane label="角色权限" name="roles">
							<template slot="label">
								<i class="el-icon-lock"></i> 角色权限
							</template>
						</el-tab-pane>
						<el-tab-pane label="系统配置" name="settings">
							<template slot="label">
								<i class="el-icon-setting"></i> 系统配置
							</template>
						</el-tab-pane>
						<el-tab-pane label="日志管理" name="logs">
							<template slot="label">
								<i class="el-icon-document"></i> 日志管理
							</template>
						</el-tab-pane>
					</el-tabs>
				</div>

				<!-- 用户管理 -->
				<div v-show="activeTab === 'users'" class="tab-content">
					<div class="content-header">
						<div class="search-box">
							<el-input
								placeholder="搜索用户"
								v-model="userSearchQuery"
								prefix-icon="el-icon-search"
								clearable>
							</el-input>
						</div>
						<el-button type="primary" @click="addUser">
							<i class="el-icon-plus"></i> 添加用户
						</el-button>
					</div>
					<el-table :data="userList" style="width: 100%">
						<el-table-column prop="username" label="用户名" width="120"></el-table-column>
						<el-table-column prop="realName" label="姓名" width="120"></el-table-column>
						<el-table-column prop="role" label="角色" width="120"></el-table-column>
						<el-table-column prop="department" label="部门" width="150"></el-table-column>
						<el-table-column prop="email" label="邮箱" width="200"></el-table-column>
						<el-table-column prop="status" label="状态" width="100">
							<template slot-scope="scope">
								<el-tag :type="scope.row.status === '启用' ? 'success' : 'danger'">
									{{ scope.row.status }}
								</el-tag>
							</template>
						</el-table-column>
						<el-table-column label="操作" width="200">
							<template slot-scope="scope">
								<el-button type="text" @click="editUser(scope.row)">编辑</el-button>
								<el-button type="text" @click="resetPassword(scope.row)">重置密码</el-button>
								<el-button type="text" class="delete-btn" @click="deleteUser(scope.row)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
					<div class="pagination-container">
						<el-pagination
							@size-change="handleUserSizeChange"
							@current-change="handleUserCurrentChange"
							:current-page="userCurrentPage"
							:page-sizes="[10, 20, 50, 100]"
							:page-size="userPageSize"
							layout="total, sizes, prev, pager, next, jumper"
							:total="userTotal">
						</el-pagination>
					</div>
				</div>

				<!-- 角色权限 -->
				<div v-show="activeTab === 'roles'" class="tab-content">
					<div class="content-header">
						<el-button type="primary" @click="addRole">
							<i class="el-icon-plus"></i> 添加角色
						</el-button>
					</div>
					<div class="role-list">
						<el-card v-for="role in roleList" :key="role.id" class="role-card">
							<div class="role-header">
								<h3>{{ role.name }}</h3>
								<div class="role-actions">
									<el-button type="text" @click="editRole(role)">编辑</el-button>
									<el-button type="text" class="delete-btn" @click="deleteRole(role)">删除</el-button>
								</div>
							</div>
							<div class="role-description">{{ role.description }}</div>
							<div class="role-permissions">
								<el-tag v-for="perm in role.permissions" :key="perm" size="small" class="permission-tag">
									{{ perm }}
								</el-tag>
							</div>
						</el-card>
					</div>
				</div>

				<!-- 系统配置 -->
				<div v-show="activeTab === 'settings'" class="tab-content">
					<el-form :model="systemSettings" label-width="120px" class="settings-form">
						<el-card class="settings-card">
							<div slot="header">
								<span>基本设置</span>
							</div>
							<el-form-item label="系统名称">
								<el-input v-model="systemName"></el-input>
							</el-form-item>
							<el-form-item label="系统Logo">
								<el-upload
									class="logo-uploader"
									action="#"
									:show-file-list="false"
									:before-upload="beforeLogoUpload">
									<img v-if="systemSettings.logo" :src="systemSettings.logo" class="logo">
									<i v-else class="el-icon-plus logo-uploader-icon"></i>
								</el-upload>
							</el-form-item>
							<el-form-item label="系统主题">
								<el-radio-group v-model="systemSettings.theme">
									<el-radio label="light">浅色</el-radio>
									<el-radio label="dark">深色</el-radio>
									<el-radio label="auto">跟随系统</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-card>

						<el-card class="settings-card">
							<div slot="header">
								<span>安全设置</span>
							</div>
							<el-form-item label="密码策略">
								<el-checkbox-group v-model="systemSettings.passwordPolicy">
									<el-checkbox label="uppercase">必须包含大写字母</el-checkbox>
									<el-checkbox label="lowercase">必须包含小写字母</el-checkbox>
									<el-checkbox label="number">必须包含数字</el-checkbox>
									<el-checkbox label="special">必须包含特殊字符</el-checkbox>
								</el-checkbox-group>
							</el-form-item>
							<el-form-item label="密码有效期">
								<el-input-number v-model="systemSettings.passwordExpiry" :min="30" :max="365"></el-input-number>
								<span class="unit">天</span>
							</el-form-item>
							<el-form-item label="登录失败锁定">
								<el-input-number v-model="systemSettings.loginAttempts" :min="3" :max="10"></el-input-number>
								<span class="unit">次</span>
							</el-form-item>
						</el-card>

						<el-card class="settings-card">
							<div slot="header">
								<span>通知设置</span>
							</div>
							<el-form-item label="邮件通知">
								<el-switch v-model="systemSettings.emailNotification"></el-switch>
							</el-form-item>
							<el-form-item label="短信通知">
								<el-switch v-model="systemSettings.smsNotification"></el-switch>
							</el-form-item>
							<el-form-item label="系统通知">
								<el-switch v-model="systemSettings.systemNotification"></el-switch>
							</el-form-item>
						</el-card>
					</el-form>
				</div>

				<!-- 日志管理 -->
				<div v-show="activeTab === 'logs'" class="tab-content">
					<div class="content-header">
						<div class="search-box">
							<el-input
								placeholder="搜索日志"
								v-model="logSearchQuery"
								prefix-icon="el-icon-search"
								clearable>
							</el-input>
						</div>
						<el-button-group>
							<el-button type="primary" @click="exportLogs">
								<i class="el-icon-download"></i> 导出日志
							</el-button>
							<el-button type="danger" @click="clearLogs">
								<i class="el-icon-delete"></i> 清空日志
							</el-button>
						</el-button-group>
					</div>
					<el-table :data="logList" style="width: 100%">
						<el-table-column prop="timestamp" label="时间" width="180"></el-table-column>
						<el-table-column prop="level" label="级别" width="100">
							<template slot-scope="scope">
								<el-tag :type="getLogLevelType(scope.row.level)">
									{{ scope.row.level }}
								</el-tag>
							</template>
						</el-table-column>
						<el-table-column prop="user" label="用户" width="120"></el-table-column>
						<el-table-column prop="action" label="操作" width="150"></el-table-column>
						<el-table-column prop="description" label="描述"></el-table-column>
						<el-table-column prop="ip" label="IP地址" width="140"></el-table-column>
					</el-table>
					<div class="pagination-container">
						<el-pagination
							@size-change="handleLogSizeChange"
							@current-change="handleLogCurrentChange"
							:current-page="logCurrentPage"
							:page-sizes="[10, 20, 50, 100]"
							:page-size="logPageSize"
							layout="total, sizes, prev, pager, next, jumper"
							:total="logTotal">
						</el-pagination>
					</div>
				</div>
			</div>
		</div>

		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<script>
			new Vue({
				el: '#app',
				data() {
					return {
						// 当前激活的标签页
						activeTab: 'users',

						// 用户管理
						userSearchQuery: '',
						userList: [
							{
								username: 'admin',
								realName: '管理员',
								role: '超级管理员',
								department: '系统部',
								email: 'admin@example.com',
								status: '启用'
							},
							{
								username: 'user1',
								realName: '张三',
								role: '普通用户',
								department: '运营部',
								email: 'user1@example.com',
								status: '启用'
							}
						],
						userCurrentPage: 1,
						userPageSize: 10,
						userTotal: 0,

						// 角色权限
						roleList: [
							{
								id: 1,
								name: '超级管理员',
								description: '系统最高权限，可以管理所有功能',
								permissions: ['用户管理', '角色管理', '系统配置', '日志查看']
							},
							{
								id: 2,
								name: '普通用户',
								description: '基础功能使用权限',
								permissions: ['数据查看', '报表导出']
							}
						],

						// 系统配置
						systemSettings: {
							systemName: '公共交通异常检测系统',
							logo: '',
							theme: 'light',
							passwordPolicy: ['uppercase', 'number'],
							passwordExpiry: 90,
							loginAttempts: 5,
							emailNotification: true,
							smsNotification: false,
							systemNotification: true
						},

						// 日志管理
						logSearchQuery: '',
						logList: [
							{
								timestamp: '2024-03-20 10:00:00',
								level: 'INFO',
								user: 'admin',
								action: '登录系统',
								description: '用户登录成功',
								ip: '192.168.1.1'
							},
							{
								timestamp: '2024-03-20 10:05:00',
								level: 'WARNING',
								user: 'user1',
								action: '修改配置',
								description: '尝试修改系统配置',
								ip: '192.168.1.2'
							}
						],
						logCurrentPage: 1,
						logPageSize: 10,
						logTotal: 0
					}
				},
				methods: {
					// 标签页切换
					handleTabClick(tab) {
						this.activeTab = tab.name;
					},

					// 保存设置
					saveSettings() {
						this.$message.success('系统设置保存成功');
					},

					// 系统备份
					backupSystem() {
						this.$message.success('系统备份开始...');
					},

					// 用户管理
					addUser() {
						this.$message.info('添加用户功能开发中...');
					},

					editUser(user) {
						this.$message.info(`编辑用户：${user.username}`);
					},

					resetPassword(user) {
						this.$confirm(`确定要重置用户"${user.username}"的密码吗？`, '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							this.$message.success('密码重置成功');
						});
					},

					deleteUser(user) {
						this.$confirm(`确定要删除用户"${user.username}"吗？`, '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							this.$message.success('用户删除成功');
						});
					},

					handleUserSizeChange(val) {
						this.userPageSize = val;
					},

					handleUserCurrentChange(val) {
						this.userCurrentPage = val;
					},

					// 角色管理
					addRole() {
						this.$message.info('添加角色功能开发中...');
					},

					editRole(role) {
						this.$message.info(`编辑角色：${role.name}`);
					},

					deleteRole(role) {
						this.$confirm(`确定要删除角色"${role.name}"吗？`, '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							this.$message.success('角色删除成功');
						});
					},

					// 系统配置
					beforeLogoUpload(file) {
						const isImage = file.type.startsWith('image/');
						if (!isImage) {
							this.$message.error('只能上传图片文件！');
							return false;
						}
						return false; // 阻止自动上传
					},

					// 日志管理
					exportLogs() {
						this.$message.success('日志导出中...');
					},

					clearLogs() {
						this.$confirm('确定要清空所有日志吗？此操作不可恢复！', '警告', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							this.$message.success('日志清空成功');
						});
					},

					getLogLevelType(level) {
						const typeMap = {
							'INFO': 'info',
							'WARNING': 'warning',
							'ERROR': 'danger'
						};
						return typeMap[level] || 'info';
					},

					handleLogSizeChange(val) {
						this.logPageSize = val;
					},

					handleLogCurrentChange(val) {
						this.logCurrentPage = val;
					}
				},
				mounted() {
					// 初始化数据
					this.userTotal = this.userList.length;
					this.logTotal = this.logList.length;
				}
			});
		</script>
	</body>
</html> 